<!--
 * @Author: tian_biao
 * @Date: 2021-08-19 09:10:40
 * @LastEditTime: 2021-08-19 14:55:38
 * @Description: 添加临时任务
-->
<template>
    <article class="bg_4dbfae">
        <!-- 标题-->
        <div class="title-bg">
            <Theader :title="title" :headerStyle="{color:'#333'}" :textStyle="{color:'#333'}"
                :titleStyle="{color:'#333'}">
                <template slot="header_arrow">
                    <van-icon size="17" name="arrow-left" @click="back"/>
                </template>
            </Theader>
        </div>
        <div class="addCon">
            <!-- <div class="basedata">
                <van-icon name="orders-o" size="1.2rem" color="#0EB295" />
                <div class="basedataTitle">基础信息</div>
            </div> -->
            <van-field label-class="labelClass" :border="border" input-align="right" readonly label="变电站"
                v-model="addData.substationName" />
            <!-- <van-field label-class="labelClass" :border="border" input-align="right" readonly label="变电站"
                v-model="addData.substationName" @click="selectSub=true">
                <template slot="button">
                    <div class="locationBox">
                        <img src="../../images/location.png" alt="" srcset="">
                        <div>我的位置</div>
                    </div>
                  </template>
            </van-field> -->
            <van-field label-class="labelClass" :border="border" readonly v-model="addData.tourUser"
                label="工作类型" input-align="right" @click="selectPeople=true"/>
            <van-field label-class="labelClass" :border="border" input-align="right" readonly label="工作类别"
                v-model="addData.deviceTypeName" right-icon="arrow"/>
            <van-field label-class="labelClass" :border="border" input-align="right" readonly label="选择设备"  right-icon="arrow"
                v-model="addData.deviceTypeName" @click="selectDevice=true"/>
           

            <van-field label-class="labelClass" :border="border" readonly v-model="addData.deviceKindName"
                label="计划开始时间" required input-align="right" right-icon="arrow" @click="show=true" />
            <van-field label-class="labelClass" :border="border" readonly v-model="addData.deviceKindName"
                label="计划结束时间" required input-align="right" right-icon="arrow" @click="show=true" />
            <van-field label-class="labelClass" :border="border" readonly 
                label="工作内容" required />
                 <div class="descBox">
                <!-- <div>巡视要求</div> -->
                <div class="textAreaBox">
                    <van-field :border="border" style="white-space:pre;" class="descField"
                        v-model.trim="addData.classificationStandardText" rows="2" autosize type="textarea"
                        maxlength="256" />
                        <!-- <img src="../../images/ly2.png" class="asr"> -->
                </div>
            </div>
        </div>
        <div class="btnBox">
            <div class="emit" @click="saveTask">提交</div>
        </div>
        <van-popup v-model="show" position="bottom" :style="{ height: '30%' }">
            <van-datetime-picker v-model="currentDate" type="date" title="选择年月日" :min-date="minDate"
                :max-date="maxDate" />
        </van-popup>
        <SelectTeamPeople @comfirmPerson="comfirmPerson" v-show="selectPeople"></SelectTeamPeople>
        <SelectSubstation @comfirmSub="comfirmSub" v-show="selectSub"></SelectSubstation>
        <SelectDevice @comfirmDevice="comfirmDevice" v-show="selectDevice"></SelectDevice>
    </article>
</template>

<script type="text/javascript">
    import Theader from "../component/header"
    import Utils from '@/utils/util'
    import SelectTeamPeople from "../component/SelectTeamPeople"
    import SelectSubstation from "../component/SelectSubstation"
    import SelectDevice from "../component/SelectDevice"
    const PinyinEngine = require('pinyin-engine');
    export default {
        name: 'Tscheduling',
        components: {
            Theader,
            SelectDevice,
            SelectSubstation,
            SelectTeamPeople,
        },
        data() {
            return {
                title: "临时任务",
                border: false,
                show: false,
                selectPeople: false,
                selectSub: false,
                selectDevice: false,
                userInfo: JSON.parse(localStorage.getItem('userInfo')),
                minDate: new Date(2020, 0, 1),
                maxDate: new Date(2025, 10, 1),
                currentDate: new Date(),
                addData: {
                    tourUser:"",
                    tourUserId:"",
                    substationName: "东善桥变",
                    substationId: "",
                    deviceName: "1号主变A相",
                    deviceId: "",
                    deviceTypeName: "主变压器",
                    deviceTypeId: "",
                    attachmentList: [],//附件
                    auditorList: [],// 文件名
                    classificationStandard: "",// 分类依据id
                    classificationStandardText: "",// 分类依据text
                    defectContent: "",// 缺陷内容
                    defectDesc: "",// 缺陷描述
                    defectDescText: "在例行巡视项目基础上，对站内设备开启箱门检查，记录设备运行数据，检查设备污秽情况，检查防火，防小动物，房屋闭锁等有无漏洞，检查接地引线是否完好，检查变电站设备厂房等方面的详细巡查",// 缺陷描述
                    defectId: "",// 缺陷id
                    defectNature: "",// 缺陷性质
                    defectNatureText: "",// 缺陷性质
                    defectPosition: "",// 缺陷部位
                    defectPositionText: "",// 缺陷部位
                    findTime: "2021/07/07 18:30:00",// 发现人时间
                    findWay: "人工巡视",// 发现方式
                    findUserId: "",// 发现人id
                    findUserName: "王染",// 发现人名字
                    inspectTaskId: "",// 检修任务id
                    roleCode: "",
                    substationRfid: "010020000000000025287847",// 变电站rfid
                    userId: "",// 登录人id
                }
            }
        },

        computed: {

        },

        methods: {
            back(){
                this.$router.go(-1)
            },
            /**
             * @description: 底部按钮
             * @param {*}
             * @return {*}
             */
            saveTask(btn) {
                this.$router.push({
                    name: "TcycleToueList"
                })
            },
            /**
             * @description: 选择人员确认
             * @param {*} val
             * @return {*}
             */
             comfirmPerson(val){
                this.selectPeople=false
                let userId=[]
                let user=[]
                val.forEach(v => {
                    console.log(v);
                    userId.push(v.userId)
                    user.push(v.userName)
                });
                this.addData.tourUser=user.join(",")
                this.addData.tourUserId=userId.join(",")
            },
            /**
             * @description: 选择变电站确认
             * @param {*} val
             * @return {*}
             */
             comfirmSub(val){
                this.selectSub=false
                this.addData.substationName=val.subName
            },
            /**
             * @description: 选择设备确认
             * @param {*} val
             * @return {*}
             */
             comfirmDevice(val){
                this.selectDevice=false
            }
        },

        watch: {

        },
        mounted() {
        },
        created() {
        },

    }
</script>

<style scoped>
    article {
        display: flex;
        flex-direction: column;
        height: 100vh;
    }

    .bg_4dbfae {
        background: #f5f6fa !important;
    }

    .title-bg {
        height: 50px;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #fff;
    }

    .addCon {
        width: 95%;
        max-height: 82%;
        overflow-y: auto;
        margin: 0 auto;
        margin-top: 3%;
        padding-bottom: 3%;
        border-radius: 4px;
        background-color: #fff;
        box-shadow: 0px 0px 1px 0px #cccccc;
    }

    .van-field__control:read-only {
        cursor: default;
        text-align: left;
    }

    #defectLib>.van-cell>.van-cell__value {
        background: #F5F6F7 !important;
        border-radius: 4px !important;
    }

    /* 缺陷描述区域 */
    .descBox {
        /* width: 100vw; */
        padding: 0 16px;
        color: #646566;
        font-size: 14px;
        /* margin-top: 20px; */
    }

    .addfile {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .addfileBtn {
        display: flex;
    }

    .addfileBtn>img {
        width: 1rem;
        height: 1rem;
    }

    .addfileBtn>div {
        margin-left: 0.2rem;
        line-height: 1rem;
    }

    .imgBox {
        position: relative;
    }

    .delImg {
        width: 1rem;
        height: 1rem;
        position: absolute;
        top: -5%;
        right: -5%;
    }

    .delLy {
        width: 1rem;
        height: 1rem;
        position: absolute;
        top: -20%;
        right: -3%;
    }

    .lyfile {
        width: 12rem;
        height: 2rem;
        border-radius: 4px;
        background: #99DDD1;
        display: flex;
        align-items: center;
    }

    .lyfile>img {
        width: 1.5rem;
        height: 1.5rem;
        margin-left: 1rem;
    }

    .lyfile>div {
        margin-left: 1rem;
        color: #0EB295;
        font-family: Source Han Sans CN;
        font-weight: regular;
        font-size: 13px;
        line-height: normal;
        letter-spacing: 0px;
        text-align: left;
    }

    .textAreaBox {
        position: relative;
    }

    .asr {
        width: 1rem;
        height: 1rem;
        position: absolute;
        bottom: 10%;
        right: 2%;
    }

    .btnBox {
        width: 100vw;
        height: 4rem;
        margin-top: 1rem;
        background-color: #fff;
        display: flex;
        justify-content: space-evenly;
        align-items: center;
        position: absolute;
        bottom: 0;
    }

    .btnBox>div {
        width: 95%;
        height: 3rem;
        border-radius: 4px;
        text-align: center;
        line-height: 3rem;
    }

    .save {
        color: #666666;
        background: #FFFFFF;
        border: 1px solid #CCCCCC;
    }

    .emit {
        color: #FFFFFF;
        background: #0EB295;
        border: 1px solid #0EB295;
    }

    .labelClass {
        color: #ccc !important;
    }

    .basedata {
        display: flex;
        align-items: center;
        margin-top: 1rem;
        margin-left: 0.8rem;
    }

    .basedataTitle {
        margin-left: 1rem;
        font-size: 1.2rem;
    }

    .radius {
        border-radius: 4px !important;
    }

    .ml1rem {
        margin-left: 1rem;
    }

    .mt1rem {
        margin-top: 1rem;
    }

    .descBox .descField {
        border: 1px solid #eee;
        margin-top: 10px;

    }

    .locationBox{
        padding-left: 1rem;
        width: 5rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
        color: #0EB295;
    }
    .locationBox>img{
        width: 1rem;
        height:1rem;
    }
</style>